<template>
	<view class="feed_back_content">
		<view class="gialogueBox">
			<scroll-view scroll-y="true" 
			:scroll-top="scrollTop" 
			:style="{ height: style.contentViewHeight + 'px' }" 
			@scrolltoupper="scrolltoupper" 
			class="record" id="scrollview">
				<view class="item m-item" :class="userName == item.themeFeedbackSendName ? 'right' : 'left'" v-for="(item, index) in themeList" :key="index">
					<view class="head">
						<image
							class="img"
							:src="
								item.themeRoleName == '监护人'
									? !!guardianPhotoPath
										? utils.localURL + '/' + guardianPhotoPath
										: '../../static/img/avatarImg.jpeg'
									: '../../static/img/parent.jpg'
							"
						></image>
					</view>
					<view class="contentText" scroll-y="true">
						<text>{{ item.themeFeedbackContent }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="import">
			<view class="inputBox"><input class="uni-input" v-model="content" /></view>
			<view class="botton" @click="sendTheme">发送</view>
		</view>
	</view>
</template>
<script>
import api from '../../api/feedback.js';
import utils from '../../api/utils.js';
export default {
	data() {
		return {
			scrollTop: 0,
			style: {
				contentViewHeight: 1000
			},
			content: '',
			themeList: [],
			id: '',
			otherId: '',
			userType: '',
			userName: '',
			token: '',
			guardianPhotoPath: '',
			utils: utils,
			pages: {
				current: 1,
				size: 15
			}
		};
	},
	mounted() {
		// methods里面定义的方法, 需要赋值给window
		Vue.prototype.$refreshPage = this.refreshPage;
	},
	methods: {
		refreshPage() {
			let _this = this;
			_this.pages.current = 1;//重定位到第一页
			_this.content = '';
			_this._initList();
			setTimeout(() => {
				_this.scrollToBottom();
			}, 500);
		},
		scrolltoupper() {
			let _this = this
			_this.pages.current += 1
			_this._initList()
		},
		scrollToBottom: function() {
			let _this = this;
			let query = uni.createSelectorQuery();
			query.selectAll('.m-item').boundingClientRect();
			query.select('#scrollview').boundingClientRect();

			query.exec(function(res) {
				_this.style.mitemHeight = 0;
				res[0].forEach(function(rect) {
					_this.style.mitemHeight += rect.height + 20;
				});
				_this.scrollTop = _this.style.mitemHeight;
			});
		},
		async _initList() {
			let _this = this;
			let total = 0
			let pageTotal = 0
			const res = uni.getSystemInfoSync();
			_this.style.pageHeight = res.windowHeight;
			_this.style.contentViewHeight = res.windowHeight - (uni.getSystemInfoSync().screenWidth / 750) * 100;
			
			// uni.showLoading({
			// 	title: 'Please wait...',
			// 	mask: true
			// });
			let data = await api.getGruSysThemeFeedbackList(
				'theme/getGruSysThemeFeedbackList',
				{
					themeId: _this.id,
					themeFeedbackReceiveId: _this.otherId,
					current: _this.pages.current,
					size: _this.pages.size
				},
				_this.token
			);
			if (data.head.status) {
				let arr = [];
				total = data.head.total
				arr = data.body;
				pageTotal = Math.ceil(total / _this.pages.size)
				if (_this.pages.current < pageTotal) {
					if (_this.pages.current == 1) {
						_this.themeList = arr;
						setTimeout(() => {
							_this.scrollToBottom()
						})
					} else {
						console.log('sss2222')
						arr.forEach(item => {
							_this.themeList.unshift(item);
						}); 
						_this.scrollTop = _this.style.contentViewHeight + _this.style.pageHeight
					}
				} else if (_this.pages.current == pageTotal) {
					console.log('end111')
					arr.forEach(item => {
						_this.themeList.unshift(item);
					});
					_this.scrollTop = _this.style.contentViewHeight + _this.style.pageHeight
				} else {
					_this.scrollTop = 20
					uni.showToast({
						title: '没有更多的数据了！',
						icon: 'none',
						duration: 2000 
					});
				}
			} else {
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
			// uni.hideLoading();
		},
		async sendTheme() {
			let _this = this;
			_this.pages.current = 1;//重定位到第一页
			uni.showLoading({
				title: 'Please wait...',
				mask: true
			});
			let data = await api.addGruSysThemeFeedback(
				'theme/addGruSysThemeFeedback',
				{
					themeFeedbackContent: _this.content,
					themeId: _this.id,
					themeFeedbackReceiveId: _this.otherId
				},
				_this.token
			);
			console.log(data);
			if (data.head.status) {
				uni.showToast({
					title: 'Success！',
					duration: 1000
				});
				_this.content = '';
				_this._initList();
				setTimeout(() => {
					_this.scrollToBottom();
				}, 500);
			} else {
				_this.content = '';
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
			uni.hideLoading();
		},
		reply() {
			let _this = this;
			uni.redirectTo({
				url: `./writeRecord?id=${_this.id}&type=回复`
			});
		}
	},
	async onLoad(options) {
		let _this = this;
		_this.id = options.id;
		_this.otherId = options.otherId;
		_this.createName = options.name;
		uni.getStorage({
			key: 'userInfo',
			success(res) {
				_this.userType = res.data.userType;
				_this.userName = res.data.userName;
			}
		});
		uni.getStorage({
			key: 'token',
			success(res) {
				_this.token = res.data;
			}
		});
		uni.getStorage({
			key: 'guardianPhotoPath',
			success(res) {
				_this.guardianPhotoPath = res.data;
			}
		});
		setTimeout(() => {
			_this.scrollToBottom();
		}, 500);
	},
	onReady() {
		let _this = this;
		_this._initList();
		setTimeout(() => {
			_this.scrollToBottom();
		}, 500);
	},
	// onPullDownRefresh() {
	// 	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// 	let _this = this;
	// 	_this.pages.current += 1;
	// 	_this._initList();
	// 	setTimeout(function() {
	// 		uni.stopPullDownRefresh(); //停止下拉刷新动画
	// 	}, 1000);
	// }
};
</script>

<style lang="scss" scoped>
.feed_back_content {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #f1f1f1;
	.gialogueBox {
		width: calc(100% - 10px);
		height: calc(100% - 50px);
		padding: 5px;
		background: #efeff4;
		.record {
			width: calc(100% - 15px);
			height: calc(100% - 55px);
			background: #efeff4;
			border-radius: 5px;
			font-size: 14px;
			padding: 10px;
			overflow-x: hidden;
			overflow-y: auto;
			.left {
				float: left;
				width: 100%;
				.head {
					float: left;
					width: 50px;
					.img {
						float: left;
						width: 30px;
						height: 30px;
						padding: 5px 10px;
					}
				}
				.contentText {
					display: flex;
					float: left;
					text-align: left;
					max-width: calc(100% - 120px);
					min-height: 20px;
					padding: 10px;
					margin-right: 40px;
					background: #fff;
					word-break: break-all;
					box-sizing: border-box;
				}
			}
			.right {
				float: right;
				width: 100%;
				min-height: 40px;
				.head {
					float: right;
					width: 50px;
					.img {
						width: 30px;
						height: 30px;
						padding: 5px 10px;
					}
				}
				.contentText {
					float: right;
					text-align: right;
					max-width: calc(100% - 120px);
					min-height: 20px;
					padding: 10px;
					margin-left: 40px;
					word-break: break-all;
					background-color: #9eea6a;
					box-sizing: border-box;
				}
			}
			.item {
				margin-bottom:20px;
				padding: 1px 0;
			}
		}
	}
	.import {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 5px 15px 20px 15px;
		box-sizing: border-box;
		background: #f1f1f1;
		border-top: solid 1px #d1d1e0;
		.inputBox {
			float: left;
			width: calc(100% - 60px);
			.uni-input {
				background: #ffffff;
				height: 30px;
				line-height: 28px;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				padding: 0 10px;
			}
		}
		.botton {
			float: left;
			width: 60px;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			background: #d72729;
			color: #fff;
			text-align: center;
			border: 0;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}
	}
}
</style>
